<template>
<div>
    <topWindow></topWindow>
    <!-- <div v-html="leafletView"></div> -->
    <div class="main">
        <leafletView :cmarkers="markers"></leafletView>
        <div class="mainbox">
            <div class="selectbox">
                <div class="selecctitem" :class="{'active': activeArea === item.continentName}" @click="activeArea = item.continentName" v-for="(item, index) in countryList" :key="index">{{ item.continentName }}</div>
            </div>
            <div class="countrybox">
                <div class="countryitem" @click="toCountryView(item.countryId)" v-for="(item, index) in searchCountry(activeArea)" :key="index">{{ item.countryName }}</div>
            </div>
        </div>
        <bottomWindow></bottomWindow>
    </div>
</div>
</template>

<script>
import topWindow from '@/components/top_window.vue'
import bottomWindow from '@/components/bottom_window.vue'
import leafletView from '@/components/leaflet.vue'
import { mapState, mapMutations } from 'vuex'
// import { mapActions } from 'vuex'
import { apiGet } from '@/assets/js/api'

export default {
    name: 'indexView',
    data() {
        return {
            leafletView: '',
            activeArea: '大洋洲',
            countryList: [],
            List: [],
            flash: true,
            markers: []
        }
    },
    beforeMount() {
        this.flash = false
        console.log(localStorage.getItem('token'));
        if(this.countryList.length === 0) {
            apiGet('/nps/nation/getContinent').then(res => {
                if(res.code === 200) {
                    this.countryList = res.data
                    const markers = [];
                    this.countryList.forEach(continent => {
                        continent.npsCountryVoList.forEach(country => {
                            const { countryId, countryName, coords } = country;
                            
                            // 添加到markers对象，使用countryId作为键
                            markers.push({
                                id: countryId,
                                name: countryName,
                                coords: this.parseJsonCoords(coords),
                            }) ;
                        });
                    });
                    this.markers.push(...markers);
                    console.log(this.markers);
                }
            })
        }
    },
    mounted() {
    },
    methods: {
        ...mapMutations('dataStore', ['changeCountryID']),
        // ...mapActions('dataStore', ['getCountryList']),
        // 将字符串coords转换为JSON对象
        parseJsonCoords(coordsStr) {
            try {
                const [lat, lng] = JSON.parse(coordsStr);
                return [
                    parseFloat(lat.toFixed(6)), // 保留六位小数并转回数字类型
                    parseFloat(lng.toFixed(6))
                ];
            } catch (error) {
                console.error('解析失败:', error);
                return null;
            }
        },
        toCountryView(id) {
            console.log(id);
            this.changeCountryID(id)
            this.$router.push('/country?id=' + id)
        },
        searchCountry(search) {
            const country = this.countryList.find(item => item.continentName==search);
            const List = country ? country.npsCountryVoList : undefined
            return List
        },
        // searchCountryNameList() {
        //     console
        //     countryList.map(item => item.continentName)
        //     const country = this.countryList.find(item => item.continentName);
        //     const List = country ? country.npsCountryVoList : undefined
        //     return List
        // }
    },
    computed: {
        ...mapState('dataStore', ['countryID']),
        // ...mapGetters('dataStore', ['searchCountry']),
        // searchCountry(search) {
        //     return this.countryList.filter(item => item.continentName==search)[0].npsCountryVoList
        // }
    },
    components: {
        topWindow,
        bottomWindow,
        leafletView
    },
}
</script>

<style scoped lang="scss">
.main {
    margin-top: 60px;
    .mainbox {
        margin: 40px 20px 80px;
        padding: 40px 180px;
        border-top: 3px solid $borderColor;
        display: flex;
        .selectbox {
            display: flex;
            flex-direction: column;
            margin-right: 40px;
            .selecctitem {
                $Height: 40px;
                height: $Height;
                line-height: $Height;
                font-weight: bold;
                width: 180px;
                text-align: center;
                border-left: 4px solid rgb(124, 124, 124);
                color: rgb(124, 124, 124);
                margin-top: 10px;
                background-color: #fff;
                cursor: pointer;
                &.active {
                    background-color: rgb(245, 249, 252);
                    border-left-color: rgb(0, 67, 149);
                    color: rgb(0, 67, 149);
                }
            }
        }
        .countrybox {
            flex: 1;
            display: flex;
            flex-wrap: wrap;
            padding-bottom: 80px;
            padding-right: 80px;
            box-sizing: content-box;
            border-right: 3px solid $borderColor;
            border-bottom: 3px solid $borderColor;
            .countryitem {
                cursor: pointer;
                $Height: 40px;
                height: $Height;
                line-height: $Height;
                font-size: 20px;
                font-weight: bold;
                flex: 0 0 calc(33.33%);
                text-align: center;
                margin-top: 10px;
            }
        }
    }
}
</style>